
<template>
	
	<view class="main">
		<view class="left">
			<view v-for="(value,index) in msg" :class="{'choose':index===chooseIndex}" @tap="tochoose(index)">
				{{value}}
			</view>
		</view>
		<view class="right">
			<paihangbangbook v-for="(c123, index456) in paihangbangbooks" :paihangbangbook="c123" :idx="index456"></paihangbangbook>
		</view>
	</view>
</template>

<script>
	import http from '@/pages/utils/request.js'
	export default {
		
		data() {
			return {
				msg:['玄幻榜','武侠榜','科幻榜','悬疑榜','都市榜'],
				chooseIndex: -1,
				paihangbangbooks:[],
			}
		},
		methods: {
			tochoose(id){
				this.chooseIndex=id
				let bookId=id+1
				const parmas = {
					bookClassId:""+bookId
				}
				http.get("/book/bookorder",{params:parmas}).then(res => {										
					this.paihangbangbooks=res.data
					
					console.log(this.paihangbangbooks)
				}).catch(err => {
					console.log(err)
				})
				
			},
		}
	}
</script>

<style>
	.main{
		display: flex;
	}
	.right{
		
		width: 510rpx;
		height: 1090rpx;
		overflow-y: auto;
		margin-left: 20rpx;
	}
	.choose{
		color: orange;
	}
	.left{
		width: 220rpx;
		height: 1090rpx;
		flex-wrap: wrap;
		background-color: rgb(240, 245, 245);
	}
	.left view{
		width: 220rpx;
		border-top: 2rpx silver solid;
		height: 80rpx;
		border-bottom: 2rpx silver solid;
		line-height: 80rpx;
		text-align: center;
	}

</style>
